<template>
  <div style="padding:15px 0;">
    <a-button size="large" type="primary" @click="showDrawer">
      <PlusOutlined/>
      新增用户
    </a-button>
  </div>

  <a-drawer
      :title="title"
      :width="720"
      :visible="visible"
      :body-style="{ paddingBottom: '80px' }"
      @close="onClose"

  >
    <a-form :model="user" :rules="rules" layout="vertical">
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="姓名" name="name">
            <a-input v-model:value="user.name" placeholder="请输入新员工姓名"/>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="个人主页" name="url">
            <a-input
                v-model:value="user.url"
                style="width: 100%"
                addon-before="http://"
                addon-after=".com"
                placeholder="请输入个人主页"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="承办人" name="owner">
            <a-select placeholder="请选择承办人" v-model:value="user.owner">
              <a-select-option value="xiao">付小羲</a-select-option>
              <a-select-option value="mao">周毛措</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="员工类型" name="type">
            <a-select placeholder="请选择员工类型" v-model:value="user.type">
              <a-select-option value="private">普通员工</a-select-option>
              <a-select-option value="public">主管</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="核准人" name="approve">
            <a-select placeholder="请选择核准人" v-model:value="user.approve">
              <a-select-option value="jack">马云</a-select-option>
              <a-select-option value="tom">马化腾</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="申请日期" name="dateTime">
            <a-date-picker
                v-model:value="user.dateTime"
                style="width: 100%"
                :get-popup-container="trigger => trigger.parentNode"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="24">
          <a-form-item label="备注" name="description">
            <a-textarea
                v-model:value="user.description"
                :rows="4"
                placeholder="请输入备注信息"
            />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <div
        :style="{
        position: 'absolute',
        right: 0,
        bottom: 0,
        width: '100%',
        borderTop: '1px solid #e9e9e9',
        padding: '10px 16px',
        background: '#fff',
        textAlign: 'right',
        zIndex: 1,
      }"
    >
      <a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
      <a-button type="primary" @click="onClose">提交</a-button>
    </div>
  </a-drawer>
</template>
<script setup lang="ts">
import {reactive, ref} from 'vue'
import moment from 'moment'

defineProps({title: String})

const user = reactive({
  name: '',
  url: '',
  owner: '',
  type: '',
  approve: '',
  dateTime: moment(),
  description: '',
})
const rules = {
  name: [{required: true, message: '请输入新员工姓名'}],
  url: [{required: true, message: '请输入个人主页'}],
  owner: [{required: true, message: '请选择承办人'}],
  type: [{required: true, message: '请选择员工类型'}],
  approve: [{required: true, message: '请选择核准人'}],
  dateTime: [{required: true, message: '请选择申请日期', type: 'object'}],
  description: [{required: true, message: '请输入备注信息'}],
}

const visible = ref<boolean>(false)

const showDrawer = () => {
  visible.value = true
}

const onClose = () => {
  visible.value = false
}
</script>
